<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>图书管理</el-breadcrumb-item>
      <el-breadcrumb-item>图书列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输图书名称" clearable v-model="name" @clear="search">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="openAddBookDialog">添加图书</el-button>
        </el-col>
      </el-row>
      <el-table :data="bookList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="图书名称" prop="name"></el-table-column>
        <el-table-column label="图片">
          <template slot-scope="b">
            <el-image
                style="width: 100px; height: 100px"
                :src="'http://localhost:10001/'+b.row.imgsrc"
                fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="图书类型" prop="booktype.name"></el-table-column>
        <el-table-column label="作者" prop="author"></el-table-column>
        <el-table-column label="出版社" prop="provider"></el-table-column>
        <el-table-column label="出版日期" prop="publishDate"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>

        <el-table-column label="库存" prop="storecount"></el-table-column>
        <el-table-column label="销量" prop="buycount"></el-table-column>
        <el-table-column label="收藏量" prop="collectioncount"></el-table-column>
        <el-table-column label="点击量" prop="readcount"></el-table-column>

        <el-table-column label="状态">
          <template slot-scope="b">
            <span v-if="b.row.state == 1">上架</span>
            <span v-if="b.row.state == 0">下架</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="removeById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6 , 12, 24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>

    <!--添加图书-->
    <el-dialog title="添加图书" :visible.sync="addBookFormVisible" @close="closeAddBookForm" :close-on-click-modal="false">
      <el-form ref="addBookForm" :rules="addBookFormRules" :model="addBookForm" label-width="150px" size="mini">
        <el-form-item label="图书名称" prop="name">
          <el-input v-model="addBookForm.name"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="addBookForm.author"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="provider">
          <el-input v-model="addBookForm.provider"></el-input>
        </el-form-item>
        <el-form-item label="出版日期" prop="publishDate">
          <el-date-picker
              v-model="addBookForm.publishDate"
              type="date"
              :editable="false"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="addBookForm.price"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="storecount">
          <el-input v-model="addBookForm.storecount"></el-input>
        </el-form-item>
        <el-form-item label="图书类型" prop="typeid">
          <el-select v-model="addBookForm.typeid" placeholder="请选择图书类型">
            <el-option label="请选择" value=""></el-option>
            <el-option v-for="t in typeList" :label="t.name" :value="t.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="封面" >
          <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              name="uploadImg"
              :headers="myHeader">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="图书简介" prop="detail">
          <el-input type="textarea" v-model="addBookForm.detail"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="closeAddBookForm">取 消</el-button>
        <el-button type="primary" @click="addBook">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import TestTree from "@/components/test/TestTree.vue";

export default {
  components: {TestTree},
  data() {
    return {
      pageNum: 1,
      pageSize: 3,
      bookList: [],
      total: 0,
      name: "", //图书名称
      addBookFormVisible:false ,
      addBookForm:{
        name:'',
        author:'',
        provider:'',
        publishDate:'',
        storecount:'',
        price:'',
        typeid:'',
        imgsrc:'',
        detail:''
      },
      addBookFormRules:{
        name:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        author:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        provider:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        publishDate:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        storecount:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        price:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        typeid:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        /*imgsrc:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],*/
        detail:[
          {required:true,message:'不能为空',trigger:'blur'}
        ]
      },
      uploadUrl: 'http://localhost:8088/book/uploadImg',
      imageUrl:'',
      typeList:[],
      myHeader:{
        token:''
      }
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res)
      console.log(file)
      this.imageUrl = URL.createObjectURL(file.raw);
      //给图书对象赋值
      this.addBookForm.imgsrc = res.data ;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt20M = file.size / 1024 / 1024 < 20;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt20M) {
        this.$message.error('上传头像图片大小不能超过 20MB!');
      }
      return isJPG && isLt20M;
    },
    //添加图书
    addBook(){
      let url = "/book/add" ;
      this.$refs.addBookForm.validate((valid)=>{
        if (!valid) return ;
        this.$axios.post(url,this.addBookForm)
            .then((res)=>{
              if (res.data.code == 200) {
                this.$refs.addBookForm.resetFields();
                this.addBookFormVisible = false ;
              }else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration:1000
                });
              }
            })
      })
    },
    //关闭添加对话框
    closeAddBookForm(){
      this.addBookFormVisible = false ;
      this.$refs.addBookForm.resetFields();
    },
    //打开添加图书对话框
    openAddBookDialog(){
      this.addBookFormVisible = true ;
    },
    handleSizeChange(size){
      this.pageSize = size ;
      this.pageNum = 1;
      this.reloadData();
    },
    handleCurrentChange(now){
      this.pageNum = now;
      this.reloadData();
    },
    search(){
      this.pageNum = 1;
      this.reloadData();
    },
    showEditDialog(obj){

    },
    removeById(id){

    },
    reloadData(){
      let url = "/book/list";
      this.$axios.get(url,{
        params:{
          name:this.name,
          now:this.pageNum,
          size:this.pageSize
        }
      }).then((res)=>{
        if (res.data.code == 200){
          this.bookList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize ;
          this.total = res.data.data.total;
        }else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration:1000
          });
        }
      })
    },
    initBookTypeData(){
      let url = "/bookType/getAllType";
      this.$axios.get(url).then((res)=>{
        if (res.data.code == 200){
          this.typeList = res.data.data;
        }else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration:1000
          });
        }
      })
    },
    initHeaderToken(){
      let token = sessionStorage.getItem("token");
      this.myHeader.token = token ;
    }
  },
  created() {
    this.reloadData();
    this.initBookTypeData();
    this.initHeaderToken();
  }
};
</script>
<style lang="less" scoped>

</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>